<template>
	<div class="">
		<div class="item item--level" :class="{ 'is-active': currentType === 'level' }" @click="changeMapType('level')"
			v-if="level">
			{{ currentType === 'level' ? '分级显示' : '分级关闭' }}
		</div>
		<div class="item" :class="{ 'is-active': currentType === '地图' }" @click="changeMapType('地图')">2D</div>
		<div class="item item--wx" :class="{ 'is-active': currentType === '卫星' }" @click="changeMapType('卫星')">
		</div>
		<div class="item item--rlt" :class="{ 'is-active': currentType === 'rlt' }"
			@click="changeMapType('rlt', rltPage)" v-if="rlt">
			热力图
		</div>
		<div class="item item--rlfx" :class="{ 'is-active': currentType === 'rlfx' }" @click="changeMapType('rlfx')"
			v-if="rlfx">
			热力分析
		</div>
	</div>
</template>
<script>
	/**
	 * 地图类型控制组件
	 * https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html
	 * https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html#a2b15
	 */
	import {
		defineComponent,
		computed,
		ref,
		watch
	} from 'vue';
	import {
		HeatmapLayer,
		clearLayer
	} from '@/layout/tabs/maps/heatmapLayer';
	import {
		useMapStore
	} from '@/store/modules/map';
	import mapstyle from '@/layout/tabs/maps/mapstyle.js';
	import {
		getCongestionThermalMap,
		getHotSpaceInfo
	} from '@/api/tomae';
	import emitter from '@/utils/emitter';

	export default defineComponent({
		name: 'MapTypeControl',

		props: {
			rlt: {
				type: Boolean,
				default: false,
			},
			rlfx: {
				type: Boolean,
				default: false,
			},
			level: {
				type: Boolean,
				default: false,
			},
			rltPage: {
				type: String,
				default: '',
			},
		},
		emit: ['isZoom'],
		setup(props, {
			emit
		}) {
			const mapStore = useMapStore();

			const map = computed(() => mapStore.ownMap);
			const currentType = ref('地图');

			watch(map, () => {
				if (map.value) {
					currentType.value = map.value.getMapType().getName();
				}
			});

			return {
				currentType,
				changeMapType(type, rltPage) {
					clearLayer();
					emit('isZoom', false);
					map.value.clearOverlays();
					if (type === 'rlfx') {
						currentType.value = 'rlfx';
						console.log("currentType.value", currentType.value);
						if (currentType.value == 'rlfx') {
							currentType.value = '地图';
						} else {
							currentType.value = 'rlfx';
						}
						console.log("热力分析");
						emitter.emit("ctlRlfx", true)
					} else if (type === 'rlt') {
						currentType.value = 'rlt';

						if (rltPage == 'basic') {
							getHotSpaceInfo().then((resPolygon) => {
								// console.log('resPolygon', resPolygon);
								if (resPolygon && resPolygon.length) {
									// let arr = [], lng = '';

									showPolygon(resPolygon);
								}
							});

							// 百度地图API功能

							function showPolygon(points) {
								for (var i = 0, listLen = points.length; i < listLen; i++) {
									var listArr = points[i];
									var point = [];
									for (var j = 0, pointsLen = listArr.points.length; j < pointsLen; j++) {
										point[j] = new BMap.Point(listArr.points[j].lng, listArr.points[j].lat);
									}

									// console.log("point",point);
									var polygon = new BMap.Polygon(point, {
										strokeColor: '#5E87DB',
										fillColor: '#5E87DB', //'#5E87DB', // 填充颜色。当参数为空时，圆形没有填充颜色
										strokeWeight: 2, // 边线宽度，以像素为单位
										strokeOpacity: 1, // 边线透明度，取值范围0-1
										fillOpacity: 0.3, // 填充透明度，取值范围0-1
									}); //创建多边形
									map.value.addOverlay(polygon);
								}
							}
						} else {
							getCongestionThermalMap().then((resPoint) => {
								if (resPoint && resPoint.length) {
									HeatmapLayer(map.value, resPoint);
								}
							});
						}

						return;
					} else if (type === 'level') {
						// console.log("currentType",currentType.value);
						if (currentType.value == 'level') {
							currentType.value = '地图';
							emit('isZoom', false);
						} else {
							currentType.value = 'level';
							emit('isZoom', true);
						}
					} else {
						if (map.value.getMapType().getName() === type) {
							currentType.value = map.value.getMapType().getName();
							return;
						}
						const typeMap = {
							地图: window.BMAP_NORMAL_MAP,
							卫星: window.BMAP_SATELLITE_MAP,
						};
						map.value.setMapType(typeMap[type]);
						currentType.value = map.value.getMapType().getName();
					}
				},
			};
		},
	});
</script>
<style lang="less" scoped>
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		background: #f7f7f7;
		border-radius: 4px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #646464;
		cursor: pointer;

		+.item {
			margin-top: 10px;
		}

		&.is-active {
			color: #3687ee;
		}

		&--wx {
			background: #f7f7f7 url(./images/uncheck.png) no-repeat center;

			&.is-active {
				background-image: url('./images/checked.png');
			}
		}

		&--rlt {
			font-size: 12px;
		}

		&--rlfx {
			font-size: 14px;
			padding: 2px;
			text-align: center;
		}

		&--level {
			font-size: 12px;
			padding: 9px;
		}
	}
</style>